<!DOCTYPE html>
<html>
<head>
    <title>个人屠宰记录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/example.css"/>
    <link rel="stylesheet" href="css/jquery-weui.css">
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=pQFgFpS0VnMXwCRN6cTc1jDOcBVi3XoD"></script>
    <script type="text/javascript" src="js/accessStat.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style>
        .infinite {
            overflow: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap"
     style="height:100%;overflow:auto;">
    <div class="weui-pull-to-refresh__layer">
        <div class='weui-pull-to-refresh__arrow'></div>
        <div class='weui-pull-to-refresh__preloader'></div>
        <div class="down">下拉刷新</div>
        <div class="up">释放刷新</div>
        <div class="refresh">正在刷新</div>
    </div>
    <div class="infinite">
        <div class="weui-panel weui-panel_access">
            <div id="count" class="weui-panel__hd"></div>
        </div>
        <div id="ul">

        </div>
    </div>
    <div class="weui-loadmore" style="padding-bottom:30px;height:20px">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</div>
<div id="article"></div>
<div id="gotop">
    <div class="arrow"></div>
    <div class="stick"></div>
</div>
<!--<div class="weui-cells__title">已无更多数据</div>-->

<!--<input type="file" style="/* visibility: hidden */" capture="camera" accept="image/*,video/*" name="" value="" >-->
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="../../js/jquery-weui.js"></script>
<script>
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    var limit = 10;
    var page = 1;
    loadlist(limit, page);
    var loading = false;  //状态标记

    //JS初始化下拉刷新
    $('#listwrap').pullToRefresh().on("pull-to-refresh", function () {
        limit = 10;
        page = 1;
        $("#ul").html("");
        loading = false;
        loadlist(limit, page);
        $('#listwrap').pullToRefreshDone();
    });

    //用户滚动到页面底部的时候，会在 body 上触发 infinite 事件
    $('#listwrap').infinite().on("infinite", function () {
        if (loading) {
            return;
        }
        loading = true;
        page = page + 1;
        $(".weui-loadmore").show();
        setTimeout(function () {
            loadlist(limit, page);
            loading = false;
        }, 1500);   //模拟延迟
    });

    // =======加载数据loadlist();
    function loadlist(limit, page) {
        var html = "";
        $.ajax({
            type: "POST",
            url: "/shambles/mobile/booth/slaughter.do",
            data: {
                "pageIndex": page,
                "pageSize": limit
            },
            dataType: "json",
            error: function (request) {
                console.log(request);
                $(".weui-loadmore").hide();
                html += "网络连接故障";
                $("#ul").append(html);
            },
            success: function (data) {
                var code = data.code;
                if (code === 1) {
                    var count = data.response.total;
                    var countSize = count + "条屠宰记录"
                    $("#count").children().remove();
                    $("#count").text(countSize);
                    var lii = data.response.list;
                    if (data.response != null || data.response != "") {
                        var i = 0;
                        for (i; i < lii.length; i++) {
                            var time = actionTime(lii[i].time);
                            var liii = lii[i].costDetails;
                            var quarantineNumber = 0;
                            var type = "";
                            for (var j = 0; j < liii.length; j++) {
                                quarantineNumber = quarantineNumber + liii[j].quarantineNumber;
                                type = type + " " + liii[j].type;
                            }

                            html = "<div class='weui-cell' style='height: 70px'>" +
                                "<div class='weui-cell__hd'><img src='../../img/suc.png' height='35' width='35'/></div>" +
                                "<div class='weui-cell__bd'>" +
                                "<p>" + type + "</p>" +
                                "</div>" +
                                "<div class='weui-cell__bd'>" +
                                "<p style='font-size: 13px'>共计" + quarantineNumber + "只</p>" +
                                "</div>" +
                                "<div class='weui-cell__ft' style='width:10em;font-size: 13px'>" + time + "</div>" +
                                "</div>";
                            $("#ul").append(html);
                        }
                        if (i < limit) {
                            html = "<li><div class=\"weui-cells__title\" >已无更多数据</div></li>";
                            $("#ul").append(html);
                            loading = true;
                        }
                    }else {
                        html += "<li><div class=\"weui-cells__title\" >已无更多数据</div></li>";
                        $("#ul").append(html);
                        loading = true;
                    }
                }

                $(".weui-loadmore").hide();
            }
        });
    }


    function clickEvent(that) {
        var guid = encodeURI($(that).attr("guid"));
        wx.getLocation({
            success: function (res) {
                // alert(JSON.stringify(res));
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                // $("#latitude").val(latitude);
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。

                $.get("/shambles/mobile/map/baiduSwitch.do", { //微信地理位置坐标转换成百度地图坐标
                    longitude: longitude,
                    latitude: latitude
                }, function (text) {
                    var obj = $.parseJSON(text);
                    var result = obj.result;
                    var lat = result[0].y;
                    var lng = result[0].x;
                    location.href = "assetDetail.html?guid=" + guid + "&latitude=" + lat + "&longitude=" + lng;
                });

            },
            cancel: function (res) {
                location.href = "assetDetail.html?guid=" + guid + "&latitude=" + latitude + "&longitude=" + longitude;
            }
        });
    }

    function addSpan(div, text) {
        var span_1 = document.createElement("span");
        span_1.innerHTML = text;
        div.appendChild(span_1);
    }


    function actionTime(value) {
        var date = new Date(value);
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y + M + D + h + m + s;
    }

    $(window).scroll(function () {  //只要窗口滚动,就触发下面代码
        var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
        if (scrollt > 200) {  //判断滚动后高度超过200px,就显示
            $("#gotop").fadeIn(400); //淡入
        } else {
            $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
        }
    });

    function getDistance(lng, lat) {
        var pointA = new BMap.Point(longitude, latitude);  // 创建点坐标A--大渡口区
        var pointB = new BMap.Point(lng, lat);  // 创建点坐标B--江北区
        var d = map.getDistance(pointA, pointB) / 1000;
        return d.toFixed(2) + ' KM';  //获取两点距离,保留小数点后两位
    }

    $("#gotop").on("click", function () { //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
        $("html,body").animate({scrollTop: "0px"}, 200);

    });
</script>
<style>
    ul {
        list-style: none;
        border-bottom: 1px solid #e8e8e8;
    }

    li {
        margin: 0px;
        padding: 0px;
        height: 123px;
        padding: 0px;
        border-bottom: 1px solid #ffffff;
        background-color: white;
        display: block;
        zoom: 1;
    }

    .arrow {
        border: 9px solid transparent;
        border-bottom-color: #3DA0DB;
        width: 0px;
        height: 0px;
        top: 0px;
    }

    .stick {
        width: 8px;
        height: 14px;
        border-radius: 1px;
        background-color: #3DA0DB;
        top: 15px;
    }

    #gotop div {
        position: absolute;
        margin: auto;
        right: 0px;
        left: 0px;
    }

    #gotop {
        background-color: #dddddd;
        height: 38px;
        width: 38px;
        border-radius: 3px;
        display: block;
        cursor: pointer;
        position: fixed;
        right: 30px;
        bottom: 50px;
        display: none;
    }


</style>
</html>